<template>
  <PageWrapper tabbar>
    <view class="flex flex-col p-12rpx">
      <view class="flex justify-between items-center p-24rpx">
        <view>
          <div class="i-lets-icons:setting-line w-48rpx h-48rpx" />
        </view>
        <view class="flex gap-52rpx">
          <div class="i-ri:message-line w-48rpx h-48rpx" />
          <div class="i-ph:scan w-48rpx h-48rpx" />
        </view>
      </view>
      <view class="mt-28rpx flex p-20rpx gap-32rpx items-center">
        <view @click="toAvatarPage">
          <image :src="userInfo?.avatar" class="rounded-full w-145rpx h-145rpx" />
        </view>
        <view class="flex flex-col gap-16rpx">
          <text class="font-700 font-size-48rpx">Hello, {{ userInfo?.nickname }}</text>
          <text class="font-400 font-size-28rpx opacity-70">开始今天的工作吧~</text>
        </view>
      </view>
      <view class="m-20rpx">
        <wd-grid border :column="3">
          <wd-grid-item text="个人信息" use-icon-slot>
            <template #icon>
              <view class="i-ph:user-list-light w-56rpx h-56rpx" />
            </template>
          </wd-grid-item>
          <wd-grid-item
            text="修改密码"
            use-icon-slot
            @click="navigateTo('/pages/profile/password')"
          >
            <template #icon>
              <view class="i-gravity-ui:lock w-56rpx h-56rpx" />
            </template>
          </wd-grid-item>
          <wd-grid-item icon="picture" text="修改信息" />
        </wd-grid>
      </view>
      <view class="m-20rpx">
        <wd-cell-group title="交易管理" border>
          <wd-cell title="标题文字" value="内容" />
          <wd-cell title="标题文字" label="描述信息" value="内容" />
        </wd-cell-group>
      </view>
      <view class="mt-20rpx flex p-20rpx">
        <view class="w-full">
          <wd-button size="large" type="warning" block @click="confirmLogout">退出登录</wd-button>
        </view>
      </view>
    </view>
  </PageWrapper>
</template>
<script setup lang="ts">
  import PageWrapper from '@/components/Page/PageWrapper.vue';
  import { useUserStore } from '@/store/modules/user';
  import { storeToRefs } from 'pinia';
  import { navigateTo } from '@/utils/page';

  const userStore = useUserStore();
  const { userInfo } = storeToRefs(userStore);

  function confirmLogout() {
    uni.showModal({
      title: '提示',
      content: '确认退出登录吗?',
      success: async (res) => {
        if (res.confirm) {
          await userStore.logout();
        }
      },
    });
  }

  function toAvatarPage() {
    console.log('xxxx');
    navigateTo('/pages/profile/avatar');
  }
</script>

<style lang="scss" scoped>
  .profile-bg {
    background: linear-gradient(180deg, #e3ebff 0%, #fcfdff 100%);
    min-height: 100%;
    background-attachment: fixed;
  }
</style>
